<template>
	<view class="joinus">
		<view class="banner">
			<image :src="baseUrl + '/wximage/joinus_banner.png'"></image>
		</view>
		<view class="nav clearfix">
			<view :class="[activeIndex==1?'active':'']" @click="activeIndex = 1">
				<view class="name">代理</view>
				<image :src="baseUrl + '/wximage/joinus_xuanze.png'" v-if="activeIndex == 1"></image>
			</view>
			<view :class="[activeIndex==2?'active':'']" @click="activeIndex = 2">
				<view class="name">商家</view>
				<image :src="baseUrl + '/wximage/joinus_xuanze.png'" v-if="activeIndex == 2"></image>
			</view>
		</view>
		<view class="form">
			<view class="list">
				<input type="text" placeholder="请输入您的姓名" v-model="name" />
				<view class="shuxian"></view>
			</view>
			<view class="list">
				<input type="text" placeholder="请输入您的电话" v-model="tell" maxlength="11" />
				<view class="shuxian"></view>
			</view>
		</view>
		<view class="submit">
			<view class="top" @click="submit">提交</view>
			<view class="desc">感谢您提交加盟合作需求，我们将尽快和您取得联系，感谢您的支持。</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseUrl: getApp().globalData.baseUrl,
				activeIndex: 1,
				name: '',
				tell: '',
			}
		},
		onLoad() {
			
		},
		methods:{
			submit(){
				let name = this.name;
				let tell = this.tell;
				
				if(name == '' || tell == ''){
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					})
					return false;
				}
				
				var reg = /^1[3456789]\d{9}$/;
				if(!reg.test(this.tell)){
					uni.showToast({
						title: '手机格式不正确',
						icon: 'none'
					})
					return false;
				}
				
				this.request({
					url: '/agent/joinus',
					data: {
						user_id: uni.getStorageSync('user_id'),
						name: name,
						tell: tell,
						activeIndex: this.activeIndex,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '成功,请耐心等待',
							icon: 'none'
						})
						
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.joinus{
		width: 100%;
		margin: 0 auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		
		.banner{
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			
			image{
				width: 100%;
				height: 420rpx;
			}
		}
		
		.nav{
			width: 100%;
			padding: 0 12rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			
			>view{
				float: left;
				width: 310rpx;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				position: relative;
				border: 1rpx solid #BBBBBB;
				border-radius: 30rpx;
				
				.name{
					font-size: 36rpx;
					color: #333333;
					font-weight: 700;
				}
				
				image{
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: -8px;;
					top: -8px;;
				}
			}
			
			.active{
				border: 1rpx solid #08D8C2;
			}
			
			>view:nth-of-type(2){
				float: right;
			}
		}
		
		.form{
			width: 100%;
			padding: 0 16rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
			
			.list{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				background: #F4F4F4;
				margin-bottom: 40rpx;
				position: relative;
				
				// #ifdef MP-ALIPAY
				input {
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 56rpx;
					width: 100%;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #999999;
					background: #F4F4F4;
				}
				
				//#endif
				
				// #ifdef MP-WEIXIN
				input {
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 56rpx;
					width: 100%;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #999999;
				}
				//#endif
				
				.shuxian{
					width: 6rpx;
					height: 28rpx;
					background: #08D8C2;
					position: absolute;
					top: 26rpx;
					left: 30rpx;
				}
			}
		}
		
		.submit{
			width: 100%;
			margin-top: 200rpx;
			text-align: center;
			padding-bottom: 30rpx;
			
			.top{
				width: 100%;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: 600;
				background: linear-gradient(to bottom, #AFFFF7, #00D6C0);
				border-radius: 46rpx;
			}
			
			.desc{
				font-size: 20rpx;
				color: #999999;
				margin-top: 40rpx;
			}
		}
	}
</style>